import {PageContainer, ProCard} from "@ant-design/pro-components";
import React, {useEffect} from "react";
import {useSnapshot} from "@@/exports";
import {SettingModel} from "@/models/setting";
import DefaultSetting from "@/pages/Setting/components/DefaultSetting";
import ChannelSetting from "@/pages/Setting/components/ChannelSetting";
import GoodsSetting from "@/pages/Setting/components/GoodsSetting";
import TenantBrandSetting from "@/pages/Setting/components/TenantBrandSetting";


const Setting: React.FC = () => {
    let settingState = useSnapshot(SettingModel.state);

    useEffect(() => {
        SettingModel.actions.setSettingActiveTabKey("default")
    }, [])

    return <PageContainer title="营销设置">
        <ProCard
            tabs={{
                tabPosition: 'left',
                activeKey: settingState.settingActiveTabKey,
                items: [
                    {
                        label: `通用设置`,
                        key: 'default',
                        children: <DefaultSetting/>,
                    },
                    {
                        label: `渠道设置`,
                        key: 'channelSetting',
                        children: <ChannelSetting/>,
                    },
                    {
                        label: `套系设置`,
                        key: 'goodsSetting',
                        children: <GoodsSetting/>,
                    },
                    {
                        label: `品牌设置`,
                        key: 'tenantBrandSetting',
                        children: <TenantBrandSetting/>,
                    },
                ],
                onChange: SettingModel.actions.setSettingActiveTabKey,
            }}
        />
    </PageContainer>
}

export default Setting

